<template>
	<view class="tab-container">
		<view class="tab-box">
      <scroll-view scroll-x class="scroll-view" scroll-with-animation :scroll-left="scrollLeft">
        <view class="scroll-content">
					<view class="tab-item-box">
						<block v-for="(item,index) in tabList" :key="index">
							<view
							 class="tab-item"
							 :id="'_tab_' + index"
							 :class="{'tab-item-active': activeIndex === index}"
							 @click="tabClick(index)"
							 :style="{color:activeIndex === index ? defaultConfig.activeTextColor : defaultConfig.textColor}"
							 >{{item.label || item }}</view>
						</block>
					</view>
          <view
              class="underLine"
                :style="{
              transform: 'translateX(' + slider.left + 'px)',
              width: defaultConfig.underLineWidth + 'px',
              height: defaultConfig.underLineHeight + 'px',
              backgroundColor: defaultConfig.underLineColor
            }"
						 />
            </view>
			</scroll-view>
		</view>
	</view>
</template>



<script>
	export default {
		name:'my-tabs',
		props:{
			config:{
				type:Object,
				default:()=>{
					return {}
				}				
			},
			tabData:{
				type:Array,
				default:()=>{
					return []
				}
			},
			defaultIndex:{
				type:Number,
				default: 0
			}
		},
		data() {
			return {
				tabList:[],
				activeIndex:-1,
				//滑块
				slider:{ left:0 },
				scrollLeft:0,
				defaultConfig:{
					//默认字体颜色
					textColor:'#333333',
					//高亮字体颜色
					activeTextColor:'#f94d2a',
					underLineWidth:24,
					underLineHeight:2,
					underLineColor:'#f94d2a'
				}
			}
		},
		watch:{
			config:{
				handler(val){
					this.defaultConfig = { ...this.defaultConfig,...val }
				},
				immediate:true
			},
      tabData: {
				handler(val){
					this.tabList = val
          setTimeout(() => {
            this.updateTabWidth()			
          }, 100)
				},
				//当前监听开始后立即调用handle
				immediate:true
			},
			defaultIndex:{
				//当defaultIndex发生变化时，回调的方法
				handler(val){
					this.activeIndex = val
					//重新计算滑块位置
					this.tabToIndex()
          this.tabToIndex()
				},
				//当前监听开始后立即调用handler
				immediate:true,				
			}
		},
		methods:{
      updateTabWidth(){
				let data =this.tabList
				if(data.length ===0) return false
				const query = uni.createSelectorQuery().in(this)
				data.forEach((item,index)=>{
					//获取dom的固定写法
					query
					.select('#_tab_' + index)
					.boundingClientRect(res=>{
						item._slider={ left:res.left+(res.width -this.defaultConfig.underLineWidth)/2 }
						if(data.length -1 === index){
              this.tabToIndex()
						}
					})
					.exec()
				})
			},
			
			tabClick(index){
				this.activeIndex = index
				this.tabToIndex()
				//发送通知
				this.$emit('tabClick',index)								
			},
			tabToIndex(){
				if (this.tabList.length === 0) return
				const activeIndex = this.activeIndex
        const underLineWidth = this.defaultConfig.underLineWidth
				this.slider={ left:this.tabList[activeIndex]._slider.left }
				this.scrollLeft=this.activeIndex * this.defaultConfig.underLineWidth

			}
			
		}
		
	}
</script>

<style lang="scss"  scoped>
.tab-container {
  font-size: $uni-font-size-base;
  height: 45px;
  line-height: 45px;
  background-color: $uni-bg-color;
  .tab-box {
    width: 100%;
    height: 45px;
    display: flex;
    position: relative;
    .scroll-view {
      white-space: nowrap;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      .scroll-content {
        width: 100%;
        height: 100%;
        position: relative;

        .tab-item-box {
          height: 100%;
          .tab-item {
            height: 100%;
            display: inline-block;
            text-align: center;
            padding: 0 15px;
            position: relative;
            text-align: center;
            color: $uni-text-color;
			
			&-active{
				color:$uni-text-color-hot
			}
          }
        }
		 .underLine {
		          height: 2px;
		          width: 25px;
		          background-color: $uni-text-color-hot;
		          border-radius: 3px;
		          transition: 0.5s;
		          position: absolute;
		          bottom: 0;
		        }
      }
    }
  }
}
/* #ifdef H5 */
/deep/.uni-scroll-view::-webkit-scrollbar{
	display: none;
}
/deep/.uni-scroll-view{
	scrollbar-width: none;
}
/* #endif */
</style>
